<template>
	<view class="shouhoujilu">
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="shangpin">
				<image src="http://523tongcheng.oss-cn-hangzhou.aliyuncs.com/webStorage/web_16678722070574997.png" mode="aspectFill"></image>
				<view class="shangpin-box">
					<view class="name">
						碧玉尊 冰种翡翠手镯 女款玉手镯 女士玉镯子 精品收藏玉石手镯珠宝玉器A货
					</view>
					<view class="spec">
						尺码：L 颜色：绿
					</view>
					<view class="price">
						退款：￥9845
					</view>
				</view>
			</view>
			<view class="zhuangtai">
				<view class="zhuangtai-left">
					<text>{{item.status===0?'退款中' : '退款完成'}}</text>
				</view>
				<view class="btn">
					<view class="btn-item" v-if="item.status == 1" @click="handleshow">
						删除记录
					</view>
					<view class="btn-item" @click="handlexiangqing">
						查看详情
					</view>
				</view>
			</view>
		</view>
		
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tishi">
						提示
					</view>
					<view class="rect-content">
						确定删除吗？
					</view>
					<view class="xian-box">
						<view class="xian">
							
						</view>
					</view>
					<view class="rect-btn">
						<view class="quxiao"  @click="show = false">
							取消
						</view>
						<view class="queding"  @click="sumbit">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					status:0
				},{
					status:1
				},{
					status:1
				},{
					status:1
				},{
					status:1
				},{
					status:1
				}],
				show:false,
				share:uni.getStorageSync('share')
			}
		},
		methods: {
			//打开删除弹框
			handleshow(){
				this.show = true
			},
			//确定
			sumbit(){
				this.show = false
			},
			//详情
			handlexiangqing(){
				uni.navigateTo({
					url:'/pages/tuikuanxiangqing/tuikuanxiangqing'
				})
			},
			
		}
	}
</script>
<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
    .shouhoujilu{
		padding: 28rpx 0rpx 25rpx 0rpx;
	}
	.item{
		padding: 28rpx;
		background: white;
		margin-bottom: 28rpx;
	}
	.shangpin{
		display: flex;
		flex-direction: row;
		padding-bottom: 28rpx;
        border-bottom: 0.5px solid #EFEFEF;
	}
	.shangpin image{
		width: 204rpx;
		height: 204rpx;
	}
	.shangpin-box{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 16rpx;
		flex: 1;
	}
	.name{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.spec{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.price{
		padding: 14rpx 22rpx;
		font-size: 32rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
		background: #F4F4F4;
		border-radius: 4px 4px 4px 4px;
	}
	.zhuangtai{
		padding-top: 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.zhuangtai-left{
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.btn{
		display: flex;
		flex-direction: row;
	}
	.btn-item{
		margin-left: 16rpx;
		width: 180rpx;
		height: 68rpx;
		border: 1px solid #262520;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 68rpx;
		text-align: center;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 80%;
		// background: #081945;
		// box-shadow: inset 0px 0px 25px 0px #045174;
		background: white;
		border-radius: 10px 10px 10px 10px;
		border-radius: 10px;
	}
	.tishi{
		padding: 30rpx 0rpx 20rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 42rpx;
	}
	.rect-content{
		padding: 30rpx 0rpx 40rpx 0rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 42rpx;
		border-bottom: 0.5px solid rgba(0,0,0,0.05);
	}
	.xian-box{
		padding: 0rpx 30rpx;
	}
	.xian{
		width: 100%;
		height: 0px;
		opacity: 0.2;
		border: 0.5rpx solid #FFFFFF;
	}
	.rect-btn{
		display: flex;
		flex-direction: row;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
	.quxiao{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #666666;
		line-height: 42rpx;
	}
	.queding{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}
</style>
